import React, {useEffect, useState} from 'react';
import Grid from "@material-ui/core/Grid";
import {Card, CardContent, CardHeader, Typography} from "@material-ui/core";

const PreviewIndicator = (props) => {
  const {viz: {name, objectData, scriptData}, card} = props;
  const [hover, setHover] = useState(false);

  useEffect(() => {
    const script = document.createElement("script");
    script.innerHTML = scriptData;
    document.getElementById("root").appendChild(script);
    return () => {
      document.getElementById("root").removeChild(script);
    };
  }, [scriptData]);

  return (
    <>
      <Grid item style={{margin: 32}}>
        {card ? <Card raised={hover} onMouseEnter={() => setHover(!hover)} onMouseLeave={() => setHover(!hover)}
                      style={{borderRadius: 8}}>
          <CardHeader title={<Typography gutterBottom variant="h6"> {name} </Typography>}/>
          <CardContent style={{backgroundColor: "#fff"}}>
            {objectData}
          </CardContent>
        </Card> : <div style={{backgroundColor: "#fff", borderRadius: 12, padding: 24}}> {objectData} </div>}
      </Grid>
    </>
  )
}

export default PreviewIndicator;
